<template>
	<ul class="todo-list">
		<!-- completed: 完成的类名 -->
		<li v-for="item in arr" :key="item.id" :class="{completed:item.isDone}">
			<div class="view">
				<input class="toggle" type="checkbox" v-model="item.isDone"/>
				<label>{{item.name}}</label>
				<button class="destroy" @click.prevent="del(item.id)"></button>
			</div>
		</li>
	</ul>

</template>

<script>
	export default {
		//props 除了数组写法之外,还可以写对象,对象可以进行校验 
		props:{

			arr:{
				//对arr这个属性来添加校验功能
				type:Array,//数据类型 Array 数组类型  type是固定写法
				required:true,//必填项
			}
		},
		methods:{
			del(id){
				console.log(id);
				this.$emit('del',id)

			}
		}
	}
</script>
